
<template>
    <div class="distribution" v-if="isShow">
        <el-dialog title="" :visible.sync="dialogVisible" width="780px" :before-close="handleClose">
            <div>
                <div style="width: 100%;text-align: center;">
                    <span style="font-size: 20px;color: #3F3F3F;">{{ '权限维护' }}</span>
                </div>
                <div style="padding: 20px;">
                    <el-collapse v-model="activeNames" style="width:700px">
                        <el-collapse-item name="PC端">
                            <template slot="title">
                                <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll"
                                    @change="handleCheckAllChange">PC端</el-checkbox>
                            </template>
                            <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
                                <el-checkbox style="width: 120px;margin-bottom: 10px;" v-for="city in cities"
                                    :label="city.id" :key="city.id">{{ city.name
                                    }}</el-checkbox>
                            </el-checkbox-group>
                        </el-collapse-item>
                        <el-collapse-item name="移动端">
                            <template slot="title">
                                <el-checkbox :indeterminate="isIndeterminate2" v-model="checkAll2"
                                    @change="handleCheckAllChange2">移动端</el-checkbox>
                            </template>
                            <el-checkbox-group v-model="checkedCities2" @change="handleCheckedCitiesChange2">
                                <el-checkbox style="width: 167px;margin-bottom: 10px;" v-for="city in cities2"
                                    :label="city.id" :key="city.id">{{ city.name
                                    }}</el-checkbox>
                            </el-checkbox-group>
                        </el-collapse-item>

                    </el-collapse>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button class="noraml-btn" @click="handleClose">取 消</el-button>
                <el-button class="noraml-btn" type="primary" @click="save">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
  
<script>

export default {
    props: {
        dialogVisible: {
            type: Boolean
        },
        id: {
            type: [String, Number]
        },
        pad: {
            type: [Boolean]
        }
    },
    data() {
        return {
            activeNames: ['PC端', '移动端'],
            cityOptions: [
                {
                    id: '1',
                    label: '设备种类管理'
                }
            ],
            baseOptions: [
                {
                    id: '11',
                    label: '压接次数维护'
                }
            ],
            rules: {
                explain: [
                    { required: true, message: '请输入角色职责', trigger: 'change' }
                ],
                name: [
                    { required: true, message: '请输入角色名称', trigger: 'change' }
                ],

            },
            checkAll: false,
            checkAll2: false,
            checkedCities: [],
            checkedCities2: [],
            cities: [],
            cities2: [],
            isIndeterminate: true,
            isIndeterminate2: true,
            form: {
                userId: '',
                pad: '',
                menuIds: [],
            },
            isShow: false,
            parentId: [],
            singleMenu: {
                id: "999",
                parentId: "0",
                name: "压接次数维护",
                path: "",
                component: "",
                type: false,
                icon: "",
                sort: 0,

            },
            parentIdList: []
        }
    },
    mounted() {
        this.getMenu().then(res => {
            this.$baseRequestGetParams('/sys/menu/getMenuIdByUserId', { userId: this.id }, {}, 'get').then(res => {
                this.form.userId = this.id;
                this.form.pad = this.pad;
                this.checkedCities = this._.difference(res.data, this.parentIdList);
                this.checkedCities2 = this.form.pad ? ['999'] : []
                this.isShow = true;
            }).catch(res => {
                this.isShow = true;
            })
        });

    },
    methods: {
        treeToList(tree) {
            var queen = [];
            var out = [];
            queen = queen.concat(tree);
            while (queen.length) {
                var first = queen.shift();
                if (first.children) {
                    queen = queen.concat(first.children)
                    delete first['children'];
                }

                out.push(first);
            }
            return out;
        },

        getMenu() {
            return new Promise(resolve => {
                this.cities = this.cityOptions;
                this.cities2 = this.baseOptions;
                this.$baseRequestGet("/sys/menu/getTree", {}, "get").then(
                    (res) => {
                        // this.cityOptions = res.data;  // 原来的形式 
                        this.cityOptions = this.treeToList(res.data);
                        this.cityOptions = this.cityOptions.filter(item => item.parentId !== "0")
                        this.parentIdList = res.data.map(item => { return item.id })
                        this.baseOptions = [this.singleMenu];
                        this.cities = this.cityOptions;
                        this.cities2 = this.baseOptions;
                        resolve();
                    }
                )
            })

        },
        handleCheckAllChange(val) {

            this.checkedCities = [];
            this.checkedCities = val ? this.cityOptions.map(item => item.id) : [];

            this.isIndeterminate = false;
        },
        handleCheckAllChange2(val) {
            this.checkedCities2 = [];
            this.checkedCities2 = val ? this.baseOptions.map(item => item.id) : [];

            this.isIndeterminate2 = false;
        },
        handleCheckedCitiesChange(value) {
            let checkedCount = value.length;
            this.checkAll = checkedCount === this.cities.length;
            // this.checkedCities =  value;
            this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
        },
        handleCheckedCitiesChange2(value) {
            let checkedCount = value.length;
            // this.checkedCities2 =  value;

            this.checkAll2 = checkedCount === this.cities2.length;
            this.isIndeterminate2 = checkedCount > 0 && checkedCount < this.cities2.length;
        },
        handleClose(done) {
            this.$emit('closeDialog')
        },
        save() {
            this.checkedCities = this._.union(this.checkedCities)
            let arrNeedId = []
            for (let index = 0; index < this.checkedCities.length; index++) {
                let arr = this.cityOptions.find(item => item.id == this.checkedCities[index])
                if (arr) {
                    let parentId = arr.parentId;
                    arrNeedId.push(parentId)

                }
            }
            arrNeedId = this._.union(arrNeedId)
            this.form.menuIds = [...this.checkedCities, ...arrNeedId];
            this.form.pad = this.checkedCities2.length == 0 ? false : true;
            this.$baseRequest('/sys/user/empower', this.form, {}, 'post').then(
                (res) => {
                    this.$message.success(`${this.id ? '修改' : '新增'}成功`);
                    this.$emit('closeDialog', 'isFresh')
                }
            );
        }
    }
}
</script>
<style>
.distribution .el-dialog__body {
    padding-top: 15px;
}

.el-collapse-item__header {
    background-color: #F8F8FC;
    padding-left: 20px;

}

.el-checkbox-group {
    padding-left: 20px;
}
</style>
<style lang="scss" scoped></style>
  